<!-- 1. xxx.html 代表这是一个网页文件, 可以在浏览器上运行查看效果 -->
<!-- 2. html文件里, 骨架结构, 用!+回车, 提示补全即可 -->
<!-- 3. 如果想在vscode软件内, 写完网页, 想运行到浏览器上查看效果, 需要在vscode上安装Live Server插件, 安装后, 在html文件右键选择<Open with Live Server>就可以把此网页运行到浏览器上 -->
<!-- 这个符号叫注释, 说明的作用不会参与到代码运行 -->
<!-- titie标签作用是设置标签栏上的文字 -->
<!-- body标签 内容就是运行到浏览器显示的内容 -->
<!-- 4. HTML标签是用来指定显示的内容, CSS样式, JS交互 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎欢迎_热烈欢迎</title>
    <link rel="stylesheet"
        href="//at.alicdn.com/t/font_1487586_fetbcu9hh3t.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js">
    </script>
    <style>
        * {
            margin: 0;
        }
        body{
            overflow: hidden;
        }
        .content{
            box-sizing: border-box;
            min-width: 1100px;
            padding: 20px;
        }
        #wordDiv {
            /*选中id叫wordDiv的标签*/
            display: none;/*隐藏它*/
        }
        #mainDiv {
            width: 440px;
        }
        #mainDiv,
        #loveWrap {
            float: left;
        }
        .content:after {
            content: " ";
            display: block;
            clear: both;
        }
        .iconfont {
            font-size: 46px;
            display: inline-block;
            animation: music 2s infinite linear;
            /* 固定定位(相对于浏览器窗口) */
            position: fixed;
            left: 0;
            bottom: 0;
        }
         /* CSS的帧动画, 做一个旋转动画 */
         @keyframes music {
            0% {
                transform: rotate(0);
                /* 0度 */
            }

            100% {
                transform: rotate(360deg);
                /* 360度 */
            }
        }
        #loveWrap {
            width: 670px;
            height: 670px;
            font-size: 24px;
            color: gray;
            position: relative;
        }
        #message{
            display: none;
            position: absolute;
            top: 160px;
            left: 180px;
            text-align: center;
        }
        .user{
            margin-left: 190px;
        }
        #lover{
            margin-top: 30px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- div作用分块 -->
        <div id="wordDiv">
            <p>绝不像攀援的凌霄花</p>
            <p>借你的高枝炫耀自己</p>
            <p>我如果爱你——</p>
            <p>绝不学痴情的鸟儿，</p>
            <p>为绿荫重复单调的歌曲；</p>
            <p>也不止像泉源，</p>
            <p>常年送来清凉的慰藉；</p>
            <p>也不止像险峰，</p>
            <p>增加你的高度，</p>
            <p>衬托你的威仪。</p>
            <p>甚至日光，</p>
            <p>甚至春雨。</p>
            <p>不，</p>
            <p>这些都还不够！</p>
            <p>我必须是你近旁的一株木棉，</p>
            <p>作为树的形象和你站在一起。</p>
            <p>根，</p>
            <p>紧握在地下；</p>
            <p>叶，</p>
            <p>相触在云里。</p>
        </div>
        <div id="mainDiv">

        </div>
        <i class="iconfont icon-yinlemusic216" onclick="musicBtn()"
            id="btn"></i>
        <div id="loveWrap">
            <canvas id="love"></canvas>
            <div id="message">
                <p>亲爱的, 这是我们在一起的时光</p>
                <p id="time"></p>
                <div id="lover">
                    <p>爱你直到永远</p>
                    <p class="user">-M先生</p>
                </div>
            </div>
        </div>
        <audio src="./music.mp3" loop id="musicAudio"></audio>
    </div>
    
    <script src="love.js"></script>
    <script>
        // 5. 加入移动端的判断
        if (window.navigator.userAgent.indexOf("Mobile") > -1) {
            alert("请在PC端打开");
            
        } else {

        
        // 1. 打字机效果
        // (1): 把标签里要表白的内容装到变量中
        // (2): 每隔0.2秒, 截取内容覆盖到mainDiv标签上, 展示效果
        // (3): 解决<>等内容出现问题, 发现<, 寻找>下一个位置, 跳过<>内容加载
        let wordDir = document.getElementById("wordDiv"); // 获取div的id叫wordDiv的标签
        let mainDiv = document.getElementById("mainDiv");
        let allStr = wordDir.innerHTML.replace(/\s+/g,
        ""); // 获取表白的内容(用replace把回车符都替换掉)
        console.log(allStr);
        let len = 0; // 截取几个字符
        let t = setInterval(() => {
            let nowStr = allStr[len]; // 取出当前位置的一个字符
            if (nowStr == "<") {
                len = allStr.indexOf(">", len) +
                1; // indexOf方法, 从当前len位置往后查找>的位置
            } else {
                len = len + 1;
            }
            mainDiv.innerHTML = allStr.substr(0, len) +
            "_"; // 从开头, 截取几个
            if (len >= allStr.length) {
                clearInterval(t);
                myLoveFn();
            }
        }, 100); // 每隔200毫秒, 执行一次相邻大括号里的内容

        // 2. 实现音乐按钮效果
        // (1): 我们使用的叫字体图标(文字: 都是由像素点组成的), 阿里巴巴矢量图标库找到2个音乐图标, 生成到网址中, 引入到此html网页上, 使用i标签加载class使用字体图标
        // (2): 给它设置固定定位, 加入帧动画做旋转效果
        // (3): 点击切换字体图标
        function musicBtn() {
            let theBtn = document.getElementById("btn");
            // icon-yinlemusic216 / icon-yinlemusic214 之间切换
            if (theBtn.className.indexOf("icon-yinlemusic216") > -1) {
                // 证明现在是黑色 -> 白色 (打开)
                theBtn.className = "iconfont icon-yinlemusic214";
                document.getElementById("musicAudio").play();
            } else {
                theBtn.className = "iconfont icon-yinlemusic216";
                document.getElementById("musicAudio").pause();
            }
        }
    }
         // 3. 实现淡出效果
        

        // 4. 直接集成心形
          function myLoveFn(){
            let nowDay = new Date();
            nowDay.setFullYear(2019);
            nowDay.setMonth(04);
            nowDay.setDate(02);
            nowDay.setHours(12);
            nowDay.setMinutes(54);
            nowDay.setSeconds(02);
            create(nowDay, $("#loveWrap"), $("#love"), $("#time"), $("#lover"));
            $("#message").fadeIn(3000);
        }
        
    </script>
</body>

</html>